import { ref } from 'vue'; // 从 vue 导入 ref

export function useToggleFullScreen() {
  // 切换全屏
  const isFullScreen = ref<boolean>(false); // 定义一个 ref 变量 isFullScreen，初始值为 false
  const toggleFullScreen = (id: string) => {
    isFullScreen.value = !isFullScreen.value; // 切换 isFullScreen 的值
    const videoContainer = document.getElementById(id); // 获取指定 id 的元素
    if (videoContainer) { // 如果元素存在
      if (videoContainer.requestFullscreen) { // 如果浏览器支持 requestFullscreen
        videoContainer.requestFullscreen(); // 调用 requestFullscreen 使元素全屏
      } else if ((videoContainer as any).webkitRequestFullscreen) { // 如果浏览器支持 webkitRequestFullscreen (Safari)
        (videoContainer as any).webkitRequestFullscreen(); // 调用 webkitRequestFullscreen 使元素全屏
      } else if ((videoContainer as any).msRequestFullscreen) { // 如果浏览器支持 msRequestFullscreen (IE11)
        (videoContainer as any).msRequestFullscreen(); // 调用 msRequestFullscreen 使元素全屏
      }
    }
    document.addEventListener('fullscreenchange', handleFullScreenChange); // 添加 fullscreenchange 事件监听器
  };
  // 监听退出全屏
  const handleFullScreenChange = () => {
    if (!document.fullscreenElement) { // 如果没有全屏元素
      // 已退出全屏
      document.removeEventListener('fullscreenchange', handleFullScreenChange); // 移除 fullscreenchange 事件监听器
      // do something
      isFullScreen.value = !isFullScreen.value; // 切换 isFullScreen 的值
    }
  };
  return { isFullScreen, toggleFullScreen }; // 返回 isFullScreen 和 toggleFullScreen
}